<template>
  <div class="article-item">
    <NuxtLink :to="`/article/${article.id}`" target="_blank" class="article-link">
      <div class="article-content">
        <div class="article-meta">
          <div class="author-info">
            <img :src="article.author.avatar" :alt="article.author.nickName" class="author-avatar" v-if="article.author && article.author.avatar">
            <img src="~assets/icon/avatar.png" :alt="article.author.nickName" class="author-avatar" v-else>
            <span class="author-name">{{article.author && article.author.nickName? article.author.nickName:'未知用户' }}</span>
          </div>
          <div class="article-date">{{ formatDate(article.createTime) }}</div>
        </div>

        <h2 class="article-title">{{ article.articleTitle }}</h2>
        <p class="article-desc">{{ article.description }}</p>

        <div class="article-footer">
          <div class="tags">
            <span v-for="tag in article.articleTags.split(',')" :key="tag" class="tag">{{ tag }}</span>
          </div>

          <div class="stats">
            <div class="stat-item">
              <el-icon><View /></el-icon>
              <span>{{formatCount(article.articleViewCount)  }}</span>
            </div>
            <div class="stat-item">
              <el-icon><ChatDotRound /></el-icon>
              <span>{{ formatCount(article.articleCommentCount) }}</span>
            </div>
            <div class="stat-item">
              <el-icon><LikeXin /></el-icon>
              <span>{{ formatCount(article.articleGoodCnt) }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="article-image" v-if="article.cover">
        <img :src="article.cover" :alt="article.title" class="cover-image">
      </div>
    </NuxtLink>
  </div>
</template>

<script setup>
import { formatCount,formatDate } from '~/composables/globals'
const props = defineProps({
  article: {
    type: Object,
    required: true
  }
})

</script>

<style lang="scss" scoped>
.article-item {
  padding: $spacing-md;
  border-bottom: 1px solid $border-color;

  &:hover {
    background-color: rgba(0, 0, 0, 0.01);

    .article-title {
      color: $primary-color;
    }
  }
}

.article-link {
  display: flex;
  gap: $spacing-md;
}

.article-content {
  flex: 1;
  min-width: 0;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $spacing-sm;
  font-size: 13px;
  color: $text-secondary;

  .author-info {
    display: flex;
    align-items: center;

    .author-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin-right: $spacing-xs;
    }
  }
}

.article-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: $spacing-sm;
  color: $text-primary;
  transition: color 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-desc {
  font-size: 14px;
  color: $text-regular;
  margin-bottom: $spacing-md;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-xs;

    .tag {
      font-size: 12px;
      color: $text-secondary;
      background-color: #f7f8fa;
      padding: 2px $spacing-xs;
      border-radius: $border-radius-sm;
    }
  }

  .stats {
    display: flex;
    gap: $spacing-md;

    .stat-item {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: $text-secondary;

      .el-icon {
        margin-right: 2px;
        font-size: 14px;
      }
    }
  }
}

.article-image {
  width: 120px;
  flex-shrink: 0;

  .cover-image {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: $border-radius-sm;
  }
}

@media (max-width: $breakpoint-md) {
  .article-link {
    flex-direction: column;
  }

  .article-image {
    width: 100%;
    margin-top: $spacing-sm;

    .cover-image {
      width: 100%;
      height: 160px;
    }
  }
}
</style>
